<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3341817" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe630;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe630;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70c;</span>
                <div class="name">购物车-填充</div>
                <div class="code-name">&amp;#xe70c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe70b;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe70b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe638;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe638;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">3.1关闭</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec7f;</span>
                <div class="name">点赞</div>
                <div class="code-name">&amp;#xec7f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">播放按钮</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61d;</span>
                <div class="name">播放</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe887;</span>
                <div class="name">暂停</div>
                <div class="code-name">&amp;#xe887;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">分享</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">开始</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61b;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe61b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe779;</span>
                <div class="name">向左1</div>
                <div class="code-name">&amp;#xe779;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65e;</span>
                <div class="name">导航地址</div>
                <div class="code-name">&amp;#xe65e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">图片</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe633;</span>
                <div class="name">关于</div>
                <div class="code-name">&amp;#xe633;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8bb;</span>
                <div class="name">手提包,购物袋,应用商店,购物商店,手提袋</div>
                <div class="code-name">&amp;#xe8bb;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">用户</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe629;</span>
                <div class="name">资讯</div>
                <div class="code-name">&amp;#xe629;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe635;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe635;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63c;</span>
                <div class="name">上</div>
                <div class="code-name">&amp;#xe63c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63d;</span>
                <div class="name">下</div>
                <div class="code-name">&amp;#xe63d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62d;</span>
                <div class="name">放大镜</div>
                <div class="code-name">&amp;#xe62d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">删除</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">太阳</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe620;</span>
                <div class="name">头像</div>
                <div class="code-name">&amp;#xe620;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">喜欢</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">作品</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ab;</span>
                <div class="name">班级管理</div>
                <div class="code-name">&amp;#xe7ab;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1672047484821'); /* IE9 */
  src: url('iconfont.eot?t=1672047484821#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1672047484821') format('woff'),
       url('iconfont.ttf?t=1672047484821') format('truetype'),
       url('iconfont.svg?t=1672047484821#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche-tianchong"></span>
            <div class="name">
              购物车-填充
            </div>
            <div class="code-name">.icon-gouwuche-tianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche1"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei1"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-fenlei1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-fenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye2"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye3"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu1"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-31guanbi"></span>
            <div class="name">
              3.1关闭
            </div>
            <div class="code-name">.icon-31guanbi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianzan"></span>
            <div class="name">
              点赞
            </div>
            <div class="code-name">.icon-dianzan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofanganniu"></span>
            <div class="name">
              播放按钮
            </div>
            <div class="code-name">.icon-bofanganniu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-bofang"></span>
            <div class="name">
              播放
            </div>
            <div class="code-name">.icon-bofang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zanting"></span>
            <div class="name">
              暂停
            </div>
            <div class="code-name">.icon-zanting
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenxiang"></span>
            <div class="name">
              分享
            </div>
            <div class="code-name">.icon-fenxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-kaishi"></span>
            <div class="name">
              开始
            </div>
            <div class="code-name">.icon-kaishi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye1"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangzuo1"></span>
            <div class="name">
              向左1
            </div>
            <div class="code-name">.icon-xiangzuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daohangdizhi"></span>
            <div class="name">
              导航地址
            </div>
            <div class="code-name">.icon-daohangdizhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tupian"></span>
            <div class="name">
              图片
            </div>
            <div class="code-name">.icon-tupian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-guanyu"></span>
            <div class="name">
              关于
            </div>
            <div class="code-name">.icon-guanyu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-handbag"></span>
            <div class="name">
              手提包,购物袋,应用商店,购物商店,手提袋
            </div>
            <div class="code-name">.icon-handbag
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yonghu"></span>
            <div class="name">
              用户
            </div>
            <div class="code-name">.icon-yonghu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zixun"></span>
            <div class="name">
              资讯
            </div>
            <div class="code-name">.icon-zixun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shang"></span>
            <div class="name">
              上
            </div>
            <div class="code-name">.icon-shang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xia"></span>
            <div class="name">
              下
            </div>
            <div class="code-name">.icon-xia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-Magnifier"></span>
            <div class="name">
              放大镜
            </div>
            <div class="code-name">.icon-Magnifier
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shanchu"></span>
            <div class="name">
              删除
            </div>
            <div class="code-name">.icon-shanchu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-taiyang-copy"></span>
            <div class="name">
              太阳
            </div>
            <div class="code-name">.icon-taiyang-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-touxiang"></span>
            <div class="name">
              头像
            </div>
            <div class="code-name">.icon-touxiang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xihuan"></span>
            <div class="name">
              喜欢
            </div>
            <div class="code-name">.icon-xihuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuopin"></span>
            <div class="name">
              作品
            </div>
            <div class="code-name">.icon-zuopin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-banjiguanli"></span>
            <div class="name">
              班级管理
            </div>
            <div class="code-name">.icon-banjiguanli
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche-tianchong"></use>
                </svg>
                <div class="name">购物车-填充</div>
                <div class="code-name">#icon-gouwuche-tianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche1"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei1"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-fenlei1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-fenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye2"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye3"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu1"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-31guanbi"></use>
                </svg>
                <div class="name">3.1关闭</div>
                <div class="code-name">#icon-31guanbi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use>
                </svg>
                <div class="name">点赞</div>
                <div class="code-name">#icon-dianzan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofanganniu"></use>
                </svg>
                <div class="name">播放按钮</div>
                <div class="code-name">#icon-bofanganniu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bofang"></use>
                </svg>
                <div class="name">播放</div>
                <div class="code-name">#icon-bofang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zanting"></use>
                </svg>
                <div class="name">暂停</div>
                <div class="code-name">#icon-zanting</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenxiang"></use>
                </svg>
                <div class="name">分享</div>
                <div class="code-name">#icon-fenxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-kaishi"></use>
                </svg>
                <div class="name">开始</div>
                <div class="code-name">#icon-kaishi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye1"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangzuo1"></use>
                </svg>
                <div class="name">向左1</div>
                <div class="code-name">#icon-xiangzuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daohangdizhi"></use>
                </svg>
                <div class="name">导航地址</div>
                <div class="code-name">#icon-daohangdizhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tupian"></use>
                </svg>
                <div class="name">图片</div>
                <div class="code-name">#icon-tupian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-guanyu"></use>
                </svg>
                <div class="name">关于</div>
                <div class="code-name">#icon-guanyu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-handbag"></use>
                </svg>
                <div class="name">手提包,购物袋,应用商店,购物商店,手提袋</div>
                <div class="code-name">#icon-handbag</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yonghu"></use>
                </svg>
                <div class="name">用户</div>
                <div class="code-name">#icon-yonghu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zixun"></use>
                </svg>
                <div class="name">资讯</div>
                <div class="code-name">#icon-zixun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shang"></use>
                </svg>
                <div class="name">上</div>
                <div class="code-name">#icon-shang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xia"></use>
                </svg>
                <div class="name">下</div>
                <div class="code-name">#icon-xia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-Magnifier"></use>
                </svg>
                <div class="name">放大镜</div>
                <div class="code-name">#icon-Magnifier</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shanchu"></use>
                </svg>
                <div class="name">删除</div>
                <div class="code-name">#icon-shanchu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-taiyang-copy"></use>
                </svg>
                <div class="name">太阳</div>
                <div class="code-name">#icon-taiyang-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-touxiang"></use>
                </svg>
                <div class="name">头像</div>
                <div class="code-name">#icon-touxiang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xihuan"></use>
                </svg>
                <div class="name">喜欢</div>
                <div class="code-name">#icon-xihuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuopin"></use>
                </svg>
                <div class="name">作品</div>
                <div class="code-name">#icon-zuopin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-banjiguanli"></use>
                </svg>
                <div class="name">班级管理</div>
                <div class="code-name">#icon-banjiguanli</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
